import React, {Component} from 'react';
import Markdown from 'react-markdown';
import {Anchor, Row, Col} from 'antd';

const {Link} = Anchor;

class JsPage extends Component {
    constructor(props) {
        super(props);
    }


    render() {

        return (
            <div>
                <Row>
                    <Col span={19}>
                        <h3 id="subSelect"> 子节点选择 </h3>
                        <Markdown source={"1、选取所有直接子节点 使用> \n" +
                        "    \n" +
                        "    $(\"#son > p\").css('background','green'); \n" +
                        "    \n" +
                        "1.1、选取特定的直接子节点（：first，last） \n" +
                        "    \n" +
                        "    $(\"#son > p:eq(2)\").css('background','green'); \n" +
                        "    $(\"#son > p:last\").css('background','green'); \n" +
                        "    \n" +
                        "1.2、直接子节点的奇偶选择 \n" +
                        "    \n" +
                        "    $(\"#son > p:even\").css('background','green'); \n" +
                        "    $(\"#son > p:odd\").css('background','yellow'); \n" +
                        "    \n" +
                        "1.3、大于|小于选择 \n" +
                        "    \n" +
                        "    $(\"#son > p:gt(2)\").css('background','green'); \n" +
                        "    $(\"#son > p:lt(2)\").css('background','yellow'); \n" +
                        "\n" +
                        "2、使用空格选择子节点（有时候使用>不能获取子节点） \n" +
                        "    \n" +
                        "    $(\"table:eq(0) tr:eq(1)\").css('background','green'); \n" +
                        "    $(\"table:eq(0) tr:eq(1) td:eq(2)\").css('background','yellow'); \n" +
                        "    $(\"#son p:eq(1) a\").css('background','yellow'); \n" +
                        "\n" +
                        "3、使用find方法 \n" +
                        "\n" +
                        "    $(\"#item1\").closest(\"ul\").find(\"li:eq(2)\").html(); \n" +
                        "    \n" +
                        "4、使用children（exp）方法（使用较少，不介绍）"}/>
                        <h3 id="pSelect"> 父节点选择 </h3>
                        <Markdown source={"\n" +
                        "1、使用parent() \n" +
                        "    \n" +
                        "    $(\"#item1\").parent().html() \n" +
                        "1.1、使用parent（exp） \n" +
                        "    \n" +
                        "    $(\"#item1\").parent().parent(\"ul\").html() \n" +
                        "1.3、使用parents（exp）（不常用：要查找所有exp直到html节点） \n" +
                        "    \n" +
                        "    $(\"#item1\").parents(\"ul\").html() \n" +
                        "2、使用closest（从当前元素开始匹配寻找，发现匹配的元素后停止） \n" +
                        "    \n" +
                        "    $(\"#item1\").closest(\"ul\").html()  "}/>
                        <h3 id="lSelect"> 同级选择 </h3>
                        <Markdown source={"1、返回下一个next(); \n" +
                        "\n" +
                        "    $(\"#item1\").parent().next().html(); \n" +
                        "    //，如果下一个相邻元素不是twe，则为空|undifined \n" +
                        "    $(\"#item1\").parent().next(\".twe\").html(); \n" +
                        "2、返回之后所有nextAll()  没有通过eq(2)或[2]来读取？？？用来判断个数？ \n" +
                        "    \n" +
                        "    //查找特定的next \n" +
                        "    $(\"#item1\").parent().nextAll(\".twe\").html() \n" +
                        "    alert(objs.parent().nextAll(\"td:eq(1)\").text()); \n" +
                        "3、返回上个prev() \n" +
                        "\n" +
                        "    $(\"#item2\").parent().prev().html(); \n" +
                        "    $(\"#item2\").parent().prev(\".twe\").html(); \n" +
                        "4、返回上所用prevAll()  \n" +
                        "\n" +
                        "    $(\"#item2\").parent().prevAll(\".twe\").html();"}/>
                        <h3 id="cSelect"> 包含选择  </h3>
                        <Markdown source={"1、包含内容contains(text) \n" +
                        "\n" +
                        "    $(\".parent1 li:contains(内容)\").html(); \n" +
                        "2、包含节点选择has(exp) \n" +
                        "\n" +
                        "    $(\".parent1 li:eq(0)\").has(\"a\").html() \n" +
                        "    $(\".parent1 li:eq(0):has(a)\").html(); "}/>
                        <h3 id="cFilter"> 属性|过滤选择器  </h3>
                        <Markdown source={"1、属性键值选择 \n" +
                        "    \n" +
                        "    $('a[title=num1]') \n" +
                        "2、可见性过滤器 \n" +
                        "2.1、$(\"#n1 :hidden\").eq(0).parent().html()； \n" +
                        "\n" +
                        "    注意：在jQuery中，visibility: hidden;和opacity: 0;都被视作可见的，因为它们在页面上占据了相应的物理空间。（ display:none） \n" +
                        "2.2、$(\"#n1 :visible\").length; \n" +
                        "\n" +
                        "九、节点操作 \n" +
                        "\n" +
                        "1、内容|节点操作 \n" +
                        "\n" +
                        "1.1、添加内容 \n" +
                        "    \n" +
                        "    //在最后添加 \n" +
                        "    $(\"#p1\").append(\"<p><b>今年是公元2015年</b></p>\") \n" +
                        "    //在第一位添加 \n" +
                        "    $(\"#p1 p:eq(0)\").before(\"<p><b>今年是公元2015年</b></p>\") \n" +
                        "    alert($(\"#p1 p:eq(0)\").html()); \n" +
                        "    //$(\"<b>你好吗？</b>\").appendTo(\"p\");//将<b>追加到p元素中 \n" +
                        "    $('#box').html($('#box').html() + '<em>www.li.cc</em>'); \n" +
                        "1.2、替换内容|节点 \n" +
                        "    \n" +
                        "    $(\"#p1 p:eq(0)\").replaceWith(\"<p><b>今年是公元2015年</b></p>\") \n" +
                        "    alert($(\"#p1 p:eq(0)\").html()); \n" +
                        "1.3、复制内容|节点 \n" +
                        "     \n" +
                        "     $(\"#p1 p:eq(1)\").clone(true).appendTo(\"#p1 p:eq(0)\"); \n" +
                        "\n" +
                        "2、删除节点 \n" +
                        "2.1、删除当前节点 \n" +
                        "   \n" +
                        "    $(\"#p1 p:eq(0)\").remove(); \n" +
                        "    alert($(\"#p1 p:eq(0)\").html());   \n" +
                        "2.2、empty() \n" +
                        "\n" +
                        "    empty()是将节点清空，清除节点的innerHTML，节点还在 \n" +
                        "\n" +
                        "3.样式操作 \n" +
                        "\n" +
                        "    css(name) 获取某个元素行内的 CSS 样式 \n" +
                        "    css([name1, name2, name3]) 获取某个元素行内多个 CSS 样式 \n" +
                        "    css(name, value) 设置某个元素行内的 CSS 样式 \n" +
                        "    css(name, function (index, value) ) 设置某个元素行内的 CSS 样式 \n" +
                        "    css({name1 : value1, name2 : value2}) 设置某个元素行内多个 CSS 样式 \n" +
                        "    addClass(class) 给某个元素添加一个 CSS 类 \n" +
                        "    addClass(class1 class2 class3...) 给某个元素添加多个 CSS 类 \n" +
                        "    removeClass(class) 删除某个元素的一个 CSS 类 \n" +
                        "    removeClass(class1 class2 class3...) 删除某个元素的多个 CSS 类 \n" +
                        "    toggleClass(class) 来回切换默认样式和指定样式 \n" +
                        "    var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象 \n" +
                        "    \n" +
                        "4.属性操作 \n" +
                        "    \n" +
                        "    attr(key)             获取某个元素 key 属性的属性值 \n" +
                        "    attr(key, value)    设置某个元素 key 属性的属性值 \n" +
                        "    attr({key1:value2, key2:value2...})  设置某个元素多个 key 属性的属性值 \n" +
                        "    attr(key, function (index, value) {}) 设置某个元素 key 通过 fn 来设置 \n" +
                        "    $('div').removeAttr('title');  //删除指定的属性 \n" +
                        "    \n" +
                        "  "}/>
                        <h3 id="tSelect"> table行列选择  </h3>
                        <Markdown source={"1、定位选择 \n" +
                        "    \n" +
                        "    //多张table用0,1,2区分，后面可以是html(); \n" +
                        "    $(\"table:eq(0) tr:eq(0) td:eq(0)\").text();  \n" +
                        "1.1、列（行）选择：\n" +
                        "    \n" +
                        "    $(function(){  \n" +
                        "        var st =  new Array(3);  \n" +
                        "        var tatal = 0;  \n" +
                        "        for (var x=1 ; x<3;x++){  \n" +
                        "             //第一列数字求和  \n" +
                        "            st[x] = $(\"table:eq(0) tr:eq(\"+x+\") td:eq(1)\").text();  \n" +
                        "            tatal += parseInt(st[x]);  \n" +
                        "        }          \n" +
                        "       alert(tatal);  \n" +
                        "    });  "}/>
                        <h3 id="fSelect"> 表单选择  </h3>
                        <Markdown source={"1、input type选择 \n" +
                        "\n" +
                        "1.1 type = \"text\"   \n" +
                        "    \n" +
                        "    //为0可以不写 \n" +
                        "    $(\"input[type=text]:eq(1)\").val() \n" +
                        "1.2 type =\"checkbox\"（name） \n" +
                        "    \n" +
                        "    $(function(){  \n" +
                        "          var key=\"\";  \n" +
                        "          var ck = $(\"input[type=checkbox]:checked\");   \n" +
                        "           //if(ck.length==1)单选  \n" +
                        "          // alert(ck.val());  \n" +
                        "          //多选  \n" +
                        "          ck.each(function(i){  \n" +
                        "              if(i != 0){  \n" +
                        "                    key += \",\";  \n" +
                        "                }  \n" +
                        "               key += this.value;  \n" +
                        "          });  \n" +
                        "            $(\"input[type=text]:eq(0)\").val(key) ;  \n" +
                        "    }); "}/>
                        <h3 id="classSelect"> 类选择  </h3>
                        <Markdown source={"    \n" +
                        "    alert($(\".div1\").length);  \n" +
                        "    $(\".div1\").each(function(){  \n" +
                        "        alert(this);  \n" +
                        "    }); "}/>
                    </Col>
                    <Col span={5}>
                        <Anchor showInkInFixed="true" style={{background:"#ebefe0"}}>
                            <Link href="#subSelect" title="子节点选择 "/>
                            <Link href="#pSelect" title="父节点选择"/>
                            <Link href="#lSelect" title="同级选择"/>
                            <Link href="#cSelect" title="包含选择"/>
                            <Link href="#cFilter" title="属性|过滤选择器 "/>
                            <Link href="#tSelect" title="table行列选择"/>
                            <Link href="#fSelect" title="表单选择"/>
                            <Link href="#classSelect" title="类选择"/>
                        </Anchor>
                    </Col>
                </Row>
            </div>

        );
    }
}

export default JsPage;